<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>轨迹汇聚</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      var randomCount = 500;

      var node_data = {
        "0": {
          x: 108.154518,
          y: 36.643346,
        },
        "1": {
          x: 121.485124,
          y: 31.235317,
        },
      };

      var edge_data = [
        {
          source: "1",
          target: "0",
        },
      ];

      var citys = [
        "北京",
        "天津",
        "上海",
        "重庆",
        "石家庄",
        "太原",
        "呼和浩特",
        "哈尔滨",
        "长春",
        "沈阳",
        "济南",
        "南京",
        "合肥",
        "杭州",
        "南昌",
        "福州",
        "郑州",
        "武汉",
        "长沙",
        "广州",
        "南宁",
        "西安",
        "银川",
        "兰州",
        "西宁",
        "乌鲁木齐",
        "成都",
        "贵阳",
        "昆明",
        "拉萨",
        "海口",
      ];

      // 构造数据
      for (var i = 1; i < randomCount; i++) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(
          citys[parseInt(Math.random() * citys.length)]
        );
        node_data[i] = {
          x: cityCenter.lng - 5 + Math.random() * 10,
          y: cityCenter.lat - 5 + Math.random() * 10,
        };
        edge_data.push({
          source: ~~(i * Math.random()),
          target: "0",
        });
      }

      var fbundling = mapv
        .utilForceEdgeBundling()
        .nodes(node_data)
        .edges(edge_data);

      var results = fbundling();

      var data = [];
      var timeData = [];

      for (var i = 0; i < results.length; i++) {
        var line = results[i];
        var coordinates = [];
        for (var j = 0; j < line.length; j++) {
          coordinates.push([line[j].x, line[j].y]);
          timeData.push({
            geometry: {
              type: "Point",
              coordinates: [line[j].x, line[j].y],
            },
            count: 1,
            time: j,
          });
        }

        data.push({
          geometry: {
            type: "LineString",
            coordinates: transformCoords(coordinates),
          },
        });

        function transformCoords(coordinates) {
          var coords = [];
          coordinates.map(function (coordinate) {
            coords.push(coordinate);
          });
          return coords;
        }
      }

      // 构建对应的dataset
      var dataSet = new mapv.DataSet(data);

      // 设置对应的参数
      // https://github.com/huiyan-fe/mapv/blob/master/API.md
      var options = {
        context: "2d", //cesium必须设置画布为2d
        cesium: {
          postRender: true,
          postRenderFrame: 0,
        },
        strokeStyle: "rgba(55, 50, 250, 0.3)",
        globalCompositeOperation: "lighter",
        shadowColor: "rgba(55, 50, 250, 0.5)",
        shadowBlur: 10,
        lineWidth: 1.0,
        draw: "simple", // 基础绘制
      };

      // 声明cesium的mapv图层并将其显示到三维球上
      var mapv1 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);
      // 构建对应的dataset
      var dataSet = new mapv.DataSet(timeData);

      var options = {
        context: "2d", //cesium必须设置画布为2d
        fillStyle: "rgba(255, 250, 250, 0.9)",
        globalCompositeOperation: "lighter",
        size: 1.5,
        animation: {
          type: "time",
          stepsRange: {
            start: 0,
            end: 100,
          },
          trails: 1,
          duration: 5,
        },
        draw: "simple", // 基础绘制
      };
      // 声明cesium的mapv图层并将其显示到三维球上
      var mapv2 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);      
    }
  </script>
</body>

</html>